<template>
  <div class="catelog-item">
    <el-row :gutter="15">
      <el-col :span="10">
        <a @click="toDetail">
          <el-image :src="catelog.cover | filterImg" fit="cover"></el-image>
        </a>
      </el-col>
      <el-col :span="14" class="catelog-intro">
        <h3>
          <a @click="toDetail">
            <el-link :underline="false" v-text="catelog.title">巨人族的新娘</el-link>
          </a>
        </h3>
        <p class="catelog-desc">简介:{{ catelog.description }}</p>
        <el-dropdown @command="handleCommand" v-if="isMyCatelog" class="ope-menu" placement="top">
          <i class="el-icon-menu"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="editCatelog">编辑</el-dropdown-item>
            <el-dropdown-item command="deleteCatelog">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "CatelogItem",
  props: {
    catelog: Object
  },
  created() {
  },
  methods: {
    toDetail() {
      this.$router.push(`/catelog/${this.catelog.id}`)
    },
    handleCommand(command) {
      this.$emit(command, this.catelog)
    },
    edit() {
      this.$emit('editCatelog', this.catelog)
    },
    deleteCatelog() {
      this.$emit('deleteCatelog')
    }
  },
  computed: {
    isMyCatelog() {
      if (!this.$store.getters.user)
        return false
      return this.$store.getters.user.id == this.catelog.userId
    }
  }
}
</script>

<style scoped>
.catelog-item {
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
  height: 140px;
  overflow-y: hidden;
  position: relative;
}

.catelog-item .el-image {
  width: 100%;
  height: 140px;
}

.catelog-intro h3 {
  margin: 0;
  font-size: 18px;
}

.upd-time, .play-type, .catelog-desc {
  font-size: 15px;
  line-height: 20px;
  color: #bbbbbb;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
  /*最大长度为3行*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.episode-num {
  font-size: 13px;
  color: #bbbbbb;
  margin: 0;
}

.catelog-intro {
  /*position: relative;*/
}

.catelog-intro .ope-menu {
  font-size: 18px;
  position: absolute;
  bottom: 0;
  right: 10px;
}

.ope-menu .el-icon-menu {
  cursor: pointer;
}

.ope-menu .el-icon-menu:hover {
  color: #5cb6ff;
}
</style>
